<template>
  <view class="container">
    <!-- 服务项目 -->
    <view class="card">
      <view class="section">
        <view class="label-wrap">
          <text class="label">服务项目</text>
          <text class="link">防水补漏</text>
        </view>
      </view>
    </view>

    <!-- 服务电话 -->
    <view class="card">
      <view class="section">
        <view class="label-wrap">
          <text class="label">服务电话</text>
          <text class="value">18987876567</text>
        </view>
      </view>
    </view>

    <!-- 服务地址和上门时间 -->
    <view class="card">
      <view class="section">
        <view class="label-wrap">
          <text class="label">天津市南开区</text>
        </view>
        <view class="address">
          <text class="placeholder">请输入详细地址</text>
		  <text class="address-detail">天津市南开区迎水道迎宾花园8号楼2单元302</text>
        </view>
        <view class="label-wrap" style="margin-top: 15px;">
          <text class="label">上门时间</text>
          <view class="date-time">
            <text class="value">2023-12-25 09:30</text>
            <text class="link">更改</text>
          </view>
        </view>
        <text class="helper-text">将为您匹配附近的师傅</text>
      </view>
    </view>

    <!-- 问题描述 -->
    <view class="card">
      <view class="section">
        <view class="label-wrap">
          <text class="label">问题描述</text>
        </view>
        <text class="value">水暖井管道漏水</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="cancel-btn" @click="cancelAppointment">取消</button>
      <button class="submit-btn" @click="submitChanges">提交修改</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    // 取消预约操作
    cancelAppointment() {
      uni.showModal({
        title: '确认取消',
        content: '您确定要取消修改吗？',
        success: (res) => {
          if (res.confirm) {
            // 返回到上一页
            uni.navigateBack();
          }
        },
      });
    },
    // 提交修改操作
    submitChanges() {
      uni.showToast({
        title: '修改提交成功！',
        icon: 'success',
      });
      // 跳转到预约确认页面，或其他相应的页面
      uni.redirectTo({
        url: '/pages/appointment/confirm',
      });
    },
  },
};
</script>

<style scoped>
/* 整体容器样式 */
.container {
  padding: 15px;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 卡片样式 */
.card {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 5px; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 500px;
}

/* 标签和内容的布局 */
.label-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 标签样式 */
.label {
  font-size: 16px;
  color: #666;
}

/* 链接样式 */
.link {
  font-size: 16px;
  color: #007bff;
  cursor: pointer;
}

/* 地址样式 */
.address {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.region {
  font-size: 14px;
  color: #999;
}
.address-detail {
  margin-left: 5px;
  font-size: 16px;
  color: #333;
}

.placeholder {
  margin-top: 5px;
  font-size: 16px;
  color: #333;
}

/* 上门时间样式 */
.date-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

/* 帮助文本样式 */
.helper-text {
  font-size: 12px;
  color: #ff9900;
  margin-top: 5px;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  width: 100%;
  max-width: 500px;
}

/* 取消按钮 */
.cancel-btn {
  width: 45%;
  background-color: #f5f5f5;
  color: #333;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}

/* 提交按钮 */
.submit-btn {
  width: 45%;
  background-color: #007bff;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}
</style>
